import React, {Component} from 'react';
import cssModule from './posts.module.less'

import {Swiper, SwiperSlide} from 'swiper/react';
import SwiperFullTime from "./SwiperFullTime/SwiperFullTime";
import SwiperInternship from "./SwiperInternship/SwiperInternship";
import SwiperPartTime from "./SwiperPartTime/SwiperPartTime";
import SwiperRecommend from "./SwiperRecommend/SwiperRecommend";

class Posts extends Component {
    state = {
        tabs: {
            index: 0,
            name: "onFullTime"
        },
        Swiper: "",
        SwiperOption: {
            allowTouchMove: true
        }
    }
    onGoTo = (url) => this.props.history.push(url)
    // 顶部按钮点击事件
    onSelect = (type) => {
        if (this.state.tabs.name === type) return
        let tabConfig = {
            'onFullTime': 0,
            'onInternship': 1,
            'onPartTime': 2,
            'onRecommend': 3
        }
        this.setState({
            tabs: {
                index: tabConfig[type],
                name: type
            }
        })
        this.state.Swiper.slideTo(tabConfig[type], 500, false)  // 改变页数并切换
    }

    // swiper 滑动事件
    SwiperChang(e) {
        console.log(this.state.tabs.index)
        this.setState({
            tabs: {
                index: e.activeIndex,
                name: e.activeIndex === 0 ? 'onChat' : 'onInteraction'
            }
        })
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                {/*顶部导航*/}
                <div className={cssModule.nav}>
                    <section className={cssModule.navLeft}>
                        <div className={`${cssModule.navBtn} ${this.state.tabs.index === 0 ? cssModule.Selected : ""}`}
                             onClick={() => this.onSelect('onFullTime')}>全职
                        </div>
                        <div className={`${cssModule.navBtn} ${this.state.tabs.index === 1 ? cssModule.Selected : ""}`}
                             onClick={() => this.onSelect('onInternship')}>实习
                        </div>
                        <div className={`${cssModule.navBtn} ${this.state.tabs.index === 2 ? cssModule.Selected : ""}`}
                             onClick={() => this.onSelect('onPartTime')}>兼职
                        </div>
                        <div className={`${cssModule.navBtn} ${this.state.tabs.index === 3 ? cssModule.Selected : ""}`}
                             onClick={() => this.onSelect('onRecommend')}>推荐
                        </div>
                    </section>
                    <i className={`iconfont ${cssModule.postIconfont}`}  onClick={() => this.onGoTo('/SearchPage')}>&#xe818;</i>
                </div>
                {/*swiper组件*/}
                <Swiper
                    initialSlide={this.state.tabs.index}
                    direction='horizontal'
                    virtualTranslate={false}
                    allowTouchMove={this.state.SwiperOption.allowTouchMove}
                    spaceBetween={50}
                    slidesPerView={1}
                    onSlideChange={(e) => this.SwiperChang(e)}
                    onSwiper={(swiper) => this.setState({Swiper: swiper})}

                >
                    <SwiperSlide className='SwiperPage'>
                        <SwiperFullTime/>
                    </SwiperSlide>
                    <SwiperSlide className='SwiperPage'>
                        <SwiperInternship/>
                    </SwiperSlide>
                    <SwiperSlide className='SwiperPage'>
                        <SwiperPartTime/>
                    </SwiperSlide>
                    <SwiperSlide className='SwiperPage'>
                        <SwiperRecommend/>
                    </SwiperSlide>
                </Swiper>
            </div>
        );
    }
}

export default Posts;